<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<style type="text/css">
	
		body{
			font-size: 11px;
			font-family: san serif;
		}
		.ui-paginator {
		        text-align: center;
		}
		            
		.ui-datatable table {
		    table-layout: fixed;
		}
	</style>
</h:head>
<f:view>
<h:body>

<h:form id="form">
<p:panel header="" toggleable="true" toggleOrientation="horizontal" > 
 
	<p:dataTable var="car" value="#{tableBean.cars}" rowKey="#{car.model}" 
				 paginator="true" rows="10" editable="true" resizableColumns="true" 
                 selection="#{tableBean.selectedCar}" selectionMode="single"  
                 filteredValue="#{tableBean.filteredCars}" id="carsTable">
		<f:facet name="header">
		    List of Cars
		</f:facet>
                    
        <p:column headerText="Model" style="width:30%" sortBy="#{car.model}" filterBy="#{car.model}" id="model">  
		   <p:cellEditor>  
		       <f:facet name="output">  
		           <h:outputText value="#{car.model}" />  
		       </f:facet>  
		       <f:facet name="input">  
		           <p:inputText value="#{car.model}" style="width:100%"/>  
		         </f:facet>  
		     </p:cellEditor>  
		</p:column>  
			        
        <p:column headerText="Year" style="width:20%" sortBy="#{car.year}" filterBy="#{car.year}" id="year">  
		   <p:cellEditor>  
		       <f:facet name="output">  
		           <h:outputText value="#{car.year}" />  
		       </f:facet>  
		       <f:facet name="input">  
		           <p:inputText value="#{car.year}" style="width:100%" label="Year"/>  
		        </f:facet>  
		    </p:cellEditor>  
		</p:column>  
  
        <p:column headerText="Manufacturer" style="width:24%" sortBy="#{car.manufacturer}" filterBy="#{car.manufacturer}" id="manufacturer">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{car.manufacturer}" />  
                </f:facet>  
                <f:facet name="input">  
                    <h:selectOneMenu value="#{car.manufacturer}" >  
                        <f:selectItems value="#{tableBean.manufacturers}"  
                            var="man"   
                            itemLabel="#{man}"  
                            itemValue="#{man}" />  
                    </h:selectOneMenu>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>                    
        <p:column headerText="Color" style="width:20%" sortBy="#{car.color}" filterBy="#{car.color}" id="color">  
		    <p:cellEditor>  
		        <f:facet name="output">  
		            <h:outputText value="#{car.color}" />  
		        </f:facet>  
		        <f:facet name="input">  
		            <h:selectOneMenu value="#{car.color}" >  
		                <f:selectItems value="#{tableBean.colors}"  
		                    var="color"   
		                    itemLabel="#{color}"  
		                    itemValue="#{color}" />  
		            </h:selectOneMenu>  
		        </f:facet>  
		    </p:cellEditor>  
		</p:column>  
			  
        <p:column style="width:6%">  
            <p:rowEditor  />  
             
        </p:column>   
        <p:column style="width:6%">  
        	<p:commandButton id="selectButton" update=":form:display" oncomplete="carDialog.show()" icon="ui-icon-search" title="View">  
	             <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />  
	         </p:commandButton> 
        </p:column>   
        <p:column style="width:6%">  
        	<p:commandButton id="selectButton2" update=":form:display" oncomplete="carDialog.show()" icon="ui-icon-close" title="Delete">  
	             <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />  
	         </p:commandButton> 
        </p:column>               
        </p:dataTable>
                                
                                <p:dialog header="Car Detail" widgetVar="carDialog" resizable="false" id="carDlg"  
                showEffect="fade" hideEffect="explode" modal="true">  
  
        <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">  
  
            <f:facet name="header">  
                <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>  
            </f:facet>  
  
            <h:outputText value="Model:" />  
            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>  
  
            <h:outputText value="Year:" />  
            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>  
  
  
            <h:outputText value="Manufacturer:" />  
            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>  
  
            <h:outputText value="Color:" />  
            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>  
  
        </h:panelGrid>  
  
    </p:dialog>  
</p:panel>                        
                </h:form>


	<h:form>
		<p:commandButton id="basic" value="Show Dialog" onclick="dlg.show();" type="button" />  
		<p:commandButton id="Lazy" value="Show Dialog" onclick="dlg2.show();" type="button" />  
                              
		<p:dialog header="Dialog" widgetVar="dlg" maximizable="true" minimizable="true">  
		    <h:outputText value="This Dialog can be Maximized and Minimized!" />  
		</p:dialog> 
		
		<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg2" dynamic="true">  
    <h:outputText value="This content is loaded lazy." />  
</p:dialog>  
	</h:form>
</h:body>
</f:view>
</html>